<template>
    <div>
        <span>获取验证码({{ time }}s)</span>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
// 倒计时的数据
let time = ref(5)
// 接收父组件传递过来的flag（用于控制计数器组件显示与隐藏）
let props = defineProps(['flag'])
let $emit = defineEmits(['getFlag'])
// 监听父组件传递过来的props数据变化
watch(() => props.flag, () => {
    let timer = setInterval(() => {
        time.value--
        if (time.value == 0) {
            $emit('getFlag', false)
            clearInterval(timer)
        }
    }, 1000)
}, { immediate: true })
</script>

<style scoped></style>